<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
  .calendar{width:100%;font-size:100%;position:relative}
  .calendar .header{height:80px;position:relative;color:#fff}
  .calendar .header .text{position:absolute;top:0;left:-1px;right:-1px;bottom:0;background-color:#308ff0;padding:15px;-webkit-transform:rotateX(90deg);transform:rotateX(90deg);-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:.4s ease-in-out 0s;opacity:0}
  .calendar .header .text>span{text-align:center;padding:16px;display:block;font-weight:700;}
  .calendar .header.active .text{-webkit-transform:rotateX(0deg);transform:rotateX(0deg);opacity:1;border-top-left-radius: 2px;border-top-right-radius: 2px;}
  .months{width:100%;position:relative}
  .months .hr{height:1px;margin:15px 0;background:#ccc}
  .month{padding:5px;width:inherit;height:inherit;background:#fff;position:absolute;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:all .4s ease-in-out 0s;}
  .months[data-flow="left"] .month{-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg)}
  .months[data-flow="right"] .month{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}
  .table{width:100%;font-size:10px;font-weight:400;display:table}
  .table .row{display:table-row}
  .table .row.head{color:#308ff0;text-transform:uppercase}
  .table .row .cell{width:14.28%;padding:5px;text-align:center;display:table-cell;font-weight: 700;}
  .table .row .cell.disable{color:#ccc}
  .table .row .cell span{display:block;line-height:28px;transition:color,background .4s ease-in-out 0s;font-weight: 500;}
  .table .row .cell.active span{color:#fff;background-color:#308ff0}
  .months .month[data-active="true"]{-webkit-transform:rotateY(0);transform:rotateY(0)}
  .header [data-action]{color:inherit;position:absolute;top:50%;margin-top:-20px;width:40px;height:40px;z-index:1;opacity:0;transition:all .4s ease-in-out 0s}
  .header [data-action]>i{width:20px;height:20px;display:block;position:absolute;left:50%;top:50%;margin-top:-10px;margin-left:-10px}
  .header [data-action]>i:before,.header [data-action]>i:after{top:50%;margin-top:-1px;content:'';position:absolute;height:2px;width:20px;border-top:2px solid;border-radius:2px}
  .header [data-action*="prev"]{left:15px}
  .header [data-action*="next"]{right:15px}
  .header [data-action*="prev"]>i:before,.header [data-action*="prev"]>i:after{left:0}
  .header [data-action*="prev"]>i:before{top:3px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
  .header [data-action*="prev"]>i:after{top:auto;bottom:3px;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
  .header [data-action*="next"]>i:before,.header [data-action*="next"]>i:after{right:0}
  .header [data-action*="next"]>i:before{top:auto;bottom:3px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
  .header [data-action*="next"]>i:after{top:3px;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
  .header.active [data-action]{opacity:1}

  .row.head{color:#2196F3}
  .header .text,
  .table .row .cell.active span{background-color:#2196F3;}
</style>
</head>
<body>
  <div class="calendar">
  <div class="header">
    <a data-action="prev-month" href="javascript:;" title="Previous Month"><i></i></a>
    <div class="text" data-render="month-year"></div>
    <a data-action="next-month" href="javascript:;" title="Next Month"><i></i></a>
  </div>
  <div class="months" data-flow="left">
    <div class="month month-a">
      <div class="render render-a"></div>
    </div>
    <div class="month month-b">
      <div class="render render-b"></div>
    </div>
  </div>
</div>
<script>
  function dynamic_length() {
    var row_length = $(".month[data-active='true'] .table div.row").length;
    if (row_length <= 6) {
      $(".months").css("height", "230px");
    } else {
      $(".months").css("height", "270px");
    }
  }
  var Calendar = function(t) {
    this.divId = t.RenderID ? t.RenderID : '[data-render="calendar"]', this.DaysOfWeek = t.DaysOfWeek ? t.DaysOfWeek : ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], this.Months = t.Months ? t.Months : ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    var e = new Date;
    this.CurrentMonth = e.getMonth(), this.CurrentYear = e.getFullYear();
    var r = t.Format;
    this.f = "string" == typeof r ? r.charAt(0).toUpperCase() : "M"
  };
  Calendar.prototype.nextMonth = function() {
    11 == this.CurrentMonth ? (this.CurrentMonth = 0, this.CurrentYear = this.CurrentYear + 1) : this.CurrentMonth = this.CurrentMonth + 1, this.divId = '[data-active="false"] .render', this.showCurrent()
  }, Calendar.prototype.prevMonth = function() {
    0 == this.CurrentMonth ? (this.CurrentMonth = 11, this.CurrentYear = this.CurrentYear - 1) : this.CurrentMonth = this.CurrentMonth - 1, this.divId = '[data-active="false"] .render', this.showCurrent()
  }, Calendar.prototype.previousYear = function() {
    this.CurrentYear = this.CurrentYear - 1, this.showCurrent()
  }, Calendar.prototype.nextYear = function() {
    this.CurrentYear = this.CurrentYear + 1, this.showCurrent()
  }, Calendar.prototype.showCurrent = function() {
    this.Calendar(this.CurrentYear, this.CurrentMonth)
  }, Calendar.prototype.checkActive = function() {
    1 == document.querySelector(".months").getAttribute("class").includes("active") ? document.querySelector(".months").setAttribute("class", "months") : document.querySelector(".months").setAttribute("class", "months active"), "true" == document.querySelector(".month-a").getAttribute("data-active") ? (document.querySelector(".month-a").setAttribute("data-active", !1), document.querySelector(".month-b").setAttribute("data-active", !0)) : (document.querySelector(".month-a").setAttribute("data-active", !0), document.querySelector(".month-b").setAttribute("data-active", !1)), setTimeout(function() {
      document.querySelector(".calendar .header").setAttribute("class", "header active")
    }, 200), document.querySelector("body").setAttribute("data-theme", this.Months[document.querySelector('[data-active="true"] .render').getAttribute("data-month")].toLowerCase())
  }, Calendar.prototype.Calendar = function(t, e) {
    "number" == typeof t && (this.CurrentYear = t), "number" == typeof t && (this.CurrentMonth = e);
    var r = (new Date).getDate(),
        n = (new Date).getMonth(),
        a = (new Date).getFullYear(),
        o = new Date(t, e, 1).getDay(),
        i = new Date(t, e + 1, 0).getDate(),
        u = 0 == e ? new Date(t - 1, 11, 0).getDate() : new Date(t, e, 0).getDate(),
        s = "<span>" + this.Months[e] + " &nbsp; " + t + "</span>",
        d = '<div class="table">';
    d += '<div class="row head">';
    for (var c = 0; c < 7; c++) d += '<div class="cell">' + this.DaysOfWeek[c] + "</div>";
    d += "</div>";
    for (var h, l = dm = "M" == this.f ? 1 : 0 == o ? -5 : 2, v = (c = 0, 0); v < 6; v++) {
      d += '<div class="row">';
      for (var m = 0; m < 7; m++) {
        if ((h = c + dm - o) < 1) d += '<div class="cell disable">' + (u - o + l++) + "</div>";
        else if (h > i) d += '<div class="cell disable">' + l++ + "</div>";
        else {
          d += '<div class="cell' + (r == h && this.CurrentMonth == n && this.CurrentYear == a ? " active" : "") + '"><span>' + h + "</span></div>", l = 1
        }
        c % 7 == 6 && h >= i && (v = 10), c++
      }
      d += "</div>"
    }
    d += "</div>", document.querySelector('[data-render="month-year"]').innerHTML = s, document.querySelector(this.divId).innerHTML = d, document.querySelector(this.divId).setAttribute("data-date", this.Months[e] + " - " + t), document.querySelector(this.divId).setAttribute("data-month", e)
  }, $(function() {
    var t = new Calendar({
      RenderID: ".render-a",
      Format: "M"
    });
    t.showCurrent(), t.checkActive();
    var e = document.querySelectorAll(".header [data-action]");
    for (i = 0; i < e.length; i++) e[i].onclick = function() {
      if (document.querySelector(".calendar .header").setAttribute("class", "header"), "true" == document.querySelector(".months").getAttribute("data-loading")) return document.querySelector(".calendar .header").setAttribute("class", "header active"), !1;
      var e;
      document.querySelector(".months").setAttribute("data-loading", "true"), this.getAttribute("data-action").includes("prev") ? (t.prevMonth(), e = "left") : (t.nextMonth(), e = "right"), t.checkActive(), document.querySelector(".months").setAttribute("data-flow", e), document.querySelector('.month[data-active="true"]').addEventListener("webkitTransitionEnd", function() {
        document.querySelector(".months").removeAttribute("data-loading")
      }), document.querySelector('.month[data-active="true"]').addEventListener("transitionend", function() {
        document.querySelector(".months").removeAttribute("data-loading")
      })
      dynamic_length();
    }
    dynamic_length();
  });
</script>
</body>
</html>
